Question

我让一切正常，然后我正在清理css并移动了一些东西。 Ilost我的水平菜单栏，它都是垂直的：$

我一直在推文并搜索网站几个小时但仍然没有运气。我的代码可能是一个简单的错误。我很确定它在css中的作用。

宁愿不要使用浮动....

感谢您的协助......

我的代码可能比需要多一些。这就是它的所在 http://www.youtube.com/watch?v=PN1iMaVfzfQ

CSS：

#menu_Box{   /*MENU BOX CONTAINER*/
 width: 890px;
 height: 100%;
 margin: 0 auto;
 padding-left: 10px;
}
#menu_Box ul{ /*MENU BOX STYLE*/
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#263A75;  
font-size:24px; 
font-weight:normal;
padding:0 0 0 10px;
margin:0;
    position:relative;
}
.extraStyle{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#263A75;  
font-size:24px;
font-weight:normal;
padding:0;
margin:0;
}
#menu_Box ul li{
display:inline-block;
}
#menu_Box ul li:hover{
    color:#456692;
}
#menu_Box ul li a,visited{
text-align:left;
color:#263A75;  
display:block;
padding: 0 0 0 0; /*Padding between titles*/ 
text-decoration:none;
}
#menu_Box ul li a:hover{
color:#456692;
text-decoration:none;
}
#menu_Box ul li:hover ul{
display:block; 
}

/*  ###############  DROP DOWN MENU BOX  ################  */   

#menu_Box ul ul{ /*Drop Down Box*/
    border: 3px solid rgba(0, 57, 96, .85) ;
display:none;
position:absolute;
background-color: rgba(139, 183, 212, .9);
    padding: 3px; /*Padding between list items*/    
}
#menu_Box ul ul li{ /*Drop Down Style*/
    display: block;
}
#menu_Box ul ul li a,visited{
color:#263A75;  
}
#menu_Box ul ul li a:hover{
    color:#456692;
}

HTML：

<ul>

   <li><a href="http://www.enhancedliving.ca/index.php">Services</a>

         <ul>
           <li><a href="http://www.enhancedliving.ca/index.php#headerH2pk">Psych-K</a> </li>
           <li><a href="http://www.enhancedliving.ca/index.php#headerH2fat">Food & Environmental Allergy and Sensitivity Testing</a> </li>
           <li><a href="http://www.enhancedliving.ca/index.php#headerH2sne">Supplement and Nutrition Evaluation</a> </li>
           <li><a href="http://www.enhancedliving.ca/index.php#headerH2fvt">Food Value Testing</a> </li>
        </ul> 
   </li> <p class="extraStyle">::</p> 


   <li><a href="http://www.enhancedliving.ca/sessions.php">Sessions</a> </li> <p class="extraStyle">::</p>

   <li><a href="http://www.enhancedliving.ca/bio.php">Biography</a> </li> <p class="extraStyle">::</p>

   <li><a href="http://www.enhancedliving.ca/forums.php">Health Topics</a> </li><p class="extraStyle">::</p>

   <li><a href="http://www.enhancedliving.ca/products.php">Favorite Products</a> </li><p class="extraStyle">::</p>

   <li><a href="http://www.enhancedliving.ca/contact.php">Contact</a> </li>

</ul>

Answer 1

更改

<p class="extraStyle">::</p>

向

<span class="extraStyle">::</span>

ul li显示内联块不水平显示

1 个答案: