Having html element ignore css element

[FirefighterKyle]

Alright so I am trying to make a navigation bar,

Css code

Spoiler: Css

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    border-radius: 10px;
}

#navi
{
    clear:both;
    font-size:15px;
    text-align: center;
}

#navi li
{
    float:left;
    height:30px;
    white-space:nowrap;
}

#navi li strong,#navi li a
{
    background-color: #333;
    color:#fff;
    float:left;
    font-weight:400;
    height:24px;
    max-width:290px;
    overflow:hidden;
    padding:6px 16px 0 22px;
    text-decoration:none;
    text-overflow:ellipsis;
}

#navi li span
{
    overflow: hidden;
    background-color: #333;
    float:left;
    height:30px;
    
}

#navi li.selected strong,#navi li.selected a
{
    background-color: #2F8ADD;
    color:#fff;
    font-weight:700;
}

#navi li.selected span
{
    background-color: #2F8ADD;
}

#navi li:hover strong,#navi li:hover a
{
    background-color: #000;
}

#navi li:hover span
{
    background-color: #333;
}

#navi li.selected:hover strong,#navi li.selected:hover a
{
    background-color: #2F8ADD;
}

#navi li.selected:hover span
{
    background-color: #2F8ADD;
}

#navi li.metab i
{
    background:transparent none no-repeat left 50%;
    font-style:normal;
    padding-left:16px;
}

.dropdown {
    position: absolute;
    color: #fff;
    clear: right;
}

.dropdown-content {
    display: none;
    background-color: #333;
    color: #fff;
    min-width: 40px;
    
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    position: absolute;
    right: 10px;
    top: 38px;
    display: block;
}

.dropdown-content:hover
{
    background-color: #000;
}

and here is my php/html

Spoiler: Html/PHP

<?php if (!isset($nav)) {
    $nav = "1";
} ?>

<ul id="navi">
    <?php if ($nav == "1") { ?>
        <li class="selected">
            <strong>Home</strong>
            <span></span>
        </li>
    <?php } else { ?>
        <li>
            <a href="{url}/index">Home</a>
            <span></span>
        </li>
    <?php } ?>

    <?php if ($nav == "2") { ?>
        <li class="selected">
            <strong>Staff</strong>
            <span></span>
        </li>
    <?php } else { ?>
        <li>
            <a href="{url}/staff">Staff</a>
            <span></span>
        </li>
    <?php } ?>

    <?php if ($nav == "3") { ?>
        <li style="float:right" class="selected">
        <Strong>Test</strong>
        <span></span>
        </li>
    
    <?php } else { ?>
    <li style="float:right">
    <div class="dropdown" style="clear:right">
        <a href="{url}/test">Test</a>
        <span></span>
        <div class="dropdown-content">
            <p>Hello World!</p>
            </div>
            <div class="dropdown-content">
            <p>Hello World2!</p>
            </div>
            </div>
    </li>
    <?php } ?>
    
    </ul>

So what is happening is when I hover over Test it does not bring the I guess subnavi we can call it or drop down menu out side of the ul bar. I am trying to figure out if there is a way to have the <div dropdown menu/navi to ignore the ul?

 

[Ghost]

Drop downs are suppose to have it's own ul's e.g

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Life <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/community">Community</a></li>
<li><a href="/leaderboards">Leaderboards</a></li>
<li class="divider"></li>
<li role="presentation" class="dropdown-header">Lifestyle</li>
<li><a href="/city">City Services</a></li>
<li class><a href="/gov">Government</a></li>


</ul>
At least this is how Bootstrap has dropdowns.

 

[FirefighterKyle]

If I gave it, it's own <ul> wouldn't it go under the first ul? i.e not in the first navigation tab?

 

[Ghost]

If I gave it, it's own <ul> wouldn't it go under the first ul? i.e not in the first navigation tab?

Whats this based off scratch HTML and CSS or bootstrap? If it's bootstrap it'd be something like this,

<?php } else { ?>
    <li style="float:right">
<li class="dropdown"  style="clear:right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Test Dropdown<span class="caret"></span></a>        <span></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#test">Test</a></li>
  </ul>
    <?php } ?>
   
    </ul>

<div class="tab-pane " id="test"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
<td width="75%" valign="top">
<div class="well" style="max-width: 93%; border-radius:5px; "><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
            <p>Hello World!</p>


</div>
</td></tr>
</table></td>
</tr>
</table>
</div>

 

[FirefighterKyle]

It's from scratch html and css, I am trying to make a nice Navigation thing with having it be active when on that page etc and with a dropdown menu for one of the pages with more pages or something.