2015-02-13 1 views
1

Я знаю, что позиция абсцесса используется в теге подменю; однако, когда я это делаю, это решает проблему, но отображается только последняя запись подменю. Другие, похоже, были поглощены. Пожалуйста помоги! Мой код показан ниже:Навигационное подменю подталкивает тело вниз

* { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    body { 
 
     background-color: #575768; 
 
    } 
 
    #topBar { 
 
     background-color: #C9A26B; 
 
     width: 100%; 
 
     height: 70px; 
 
     color: white; 
 
     font-family: arial, helvetica, sans-serif; 
 
    } 
 
    .fixedwidth { 
 
     width: 1500px; 
 
     margin: 0 auto; 
 
    } 
 
    #logodiv { 
 
     padding-top: 5px; 
 
     float: left; 
 
     border-right: #FFFFFF 1px solid; 
 
     padding-right: 30px; 
 
    } 
 
    #signindiv { 
 
     font-weight: bold; 
 
     float: left; 
 
     font-size: 1em; 
 
     width: 90px; 
 
     border-right: #FFFFFF 1px solid; 
 
     padding: 25px 0 27px 20px; 
 
    } 
 
    #topmenudiv { 
 
     padding-top: 20px; 
 
    } 
 
    /* Rules for Nav Menu ___________________________________ */ 
 
    #mainmenu, 
 
    .submenu { 
 
     list-style-type: none; 
 
    } 
 
    #mainmenu li { 
 
     width: 185px; 
 
     text-align: center; 
 
     position: relative; 
 
     float: left; 
 
     margin-right: 4px; 
 
    } 
 
    #mainmenu ul li {} #mainmenu a { 
 
     text-decoration: none; 
 
     display: block; 
 
     width: 185px; 
 
     height: 40px; 
 
     background-color: #5E5D5B; 
 
     border: 1px solid #CCC; 
 
     border-radius: 5px; 
 
     color: #EE9A24; 
 
    } 
 
    #mainmenu .submenu a { 
 
     margin-top: 2px; 
 
    } 
 
    #mainmenu li:hover > a { 
 
     background-color: #CFC; 
 
    } 
 
    #mainmenu li:hover a:hover { 
 
     background-color: #FFD8A4; 
 
    } 
 
    #mainmenu .submenu { 
 
     display: none; 
 
    } 
 
    #mainmenu li:hover .submenu { 
 
     display: block; 
 
    } 
 
    #meat { 
 
     clear: both; 
 
     padding-top: 20px; 
 
    } 
 
    footer { 
 
     text-align: center; 
 
     margin: 0 auto; 
 
    }
<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>ST-LLC About Us</title> 
 

 
    <meta charset="utf-8" /> 
 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 

 
</head> 
 

 
<body> 
 
    <div id="container"> 
 

 
    <div id="topBar"> 
 

 
     <div class="fixedwidth"> 
 

 
     <div id="logodiv"> 
 

 
      <img src="images/LLClogo.jpg" width="170px" /> 
 

 
     </div> 
 

 
     <div id="signindiv">Sign In 
 

 
     </div> 
 

 
     <div id="topmenudiv"> 
 

 
      <ul id="mainmenu"> 
 
      <li><a href="#">About Us </a> 
 
      </li> 
 
      <li><a href="#"> Services </a> 
 
       <ul class="submenu"> 
 
       <li><a href="#"> Project Management</a> 
 
       </li> 
 
       <li><a href="#"> Digital Content</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#"> Projects </a> 
 
       <ul class="submenu"> 
 
       <li><a href="#">Active Projects</a> 
 
       </li> 
 
       <li><a href="#">Closed Projects</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#"> ST-LLC Publications </a> 
 
       <ul class="submenu"> 
 
       <li><a href="#"> Recent Publications</a> 
 
       </li> 
 
       <li><a href="#"> Past Publications</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#"> Request for Proposals (RFP) </a> 
 
      </li> 
 
      <li><a href="#"> Contacts </a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="meat"> 
 

 

 

 
      <p>On June 6, 2004 the ASME Board of Governors (BOG) authorized</p>

+1

установи уль абсолютно, поместите .submenu Ли в блоке + положении относительно; – jbutler483

ответ

0

Попробуйте это на подменю

#mainmenu .submenu { 
    display: none; 
    position: absolute; 
    top: 100%; 
} 
+0

Спасибо Аарон! Оно работает! –

+0

Блестящий, если вы можете нажать на галочку рядом с моим ответом, пожалуйста, отметьте ее как правильную. – Aaron