我有一个从Dreamweaver模板创建的垂直菜单栏。 为此生成了CSS。 从那以后,我添加了一个子菜单,我想从它们对应的主菜单链接的左侧弹出。 我尝试过的一切以及所有的研究都无济于事。 我认为我的CSS文件某种程度上不允许子菜单向左弹出。

现在正在做的事情是垂直的。 子菜单可根据需要隐藏,但悬停时会弹出而不是向左弹出。 请帮我解决这个问题,因为我已经进行了将近一个星期的工作,而且看不到答案。 提前致谢。

JSfiddle演示

的HTML

    <div class="sidebar1">
      <nav>
        <ul id="navbar">
          <li><a href="index.html">Home</a></li>
          <li><a href="solarshades.html">Solar Shades</a>
              <ul class="submenu">
              <li><a href="SolarShadeFabrics.html">Solar Shades Fabrics</a> </li>
              </ul></li>
          <li><a href="privacyshades.html">Privacy Shades</a>
              <ul class="submenu">
              <li><a href="PrivacyShadeFabrics.html">Privacy Shades Fabrics</a> </li>
              </ul></li>
          <li><a href="blackoutshades.html">Blackout Shades</a>
              <ul class="submenu">
              <li><a href="BlackoutShadeFabrics.html">Blackout Shades Fabrics</a> </li>
              </ul></li>
          <li><a href="patioshades.html">Patio Shades</a>
              <ul class="submenu">
              <li><a href="PatioShadeFabrics.html">Exterior Shades Fabrics</a> </li>
              </ul></li>
          <li><a href="customdrapesandcurtain.html">Custom Drapes and Curtains</a>
              <ul class="submenu">
              <li><a href="DraperyFabrics.html">Drapery Fabrics</a> </li>
              <li><a href="MeasureingDrapery.html">Measuring Drapery</a> </li>
              <li><a href="Curved Drapery Template.html">Curved Drapery Template</a> </li>
              </ul></li>
          <li><a href="draperysystems.html">Drapery Systems</a></li>
          <li><a href="hometheatercurtains.html">Home Theater Curtains</a>
              <ul class="submenu">
              <li><a href="HomeTheaterFabrics.html">Home Theater Fabrics</a> </li>
              </ul></li>
          <li><a href="somfyproducts.html">Somfy products</a>
          <ul class="submenu">
              <li><a href="SomfyMotor.html">Somfy Motor</a> </li>
              <li><a href="SomfyControl.html">Somfy Control</a> </li>
              <li><a href="SomfySwitch.html">Somfy Switch</a> </li>
              <li><a href="SomfyAccessories.html">Somfy Accessories</a> </li>
              </ul></li>
          <li><a href="photogalleries.html">Photo Gallary</a>
          <ul class="submenu">
              <li><a href="DraperyShowroom.html">Drapery Showroom</a> </li>
              <li><a href="PortfolioGallery.html">Portfolio Gallerys</a> </li>
              </ul></li>
          <li><a href="howtomeasureforshades.html">How to Measure for Shades</a></li>
          <li><a href="requestforshadequote.html">Request for Shade Quote</a></li>
          <li><a href="technicallinks.html">Technical Links</a></li>
          <li><a href="aboutus.html">About Us</a></li>
          <li><a href="contactus.html">Contact Us</a></li>
        </ul>
        </nav>
        <aside>
          <p> Some informational text can go HERE</p>

        </aside>

      </div>

的CSS

@charset "utf-8";
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}
ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {

    margin-top: 0;   
    padding-right: 15px;
    padding-left: 15px; 
}
a img { 
    border: none;
}

a:link {
    color: #42413C;
    text-decoration: underline; 
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus { 
    text-decoration: none;
}

.container {
    width: 960px;
    background-color: #FFFFFF;
    margin: 0 auto; 
}
header {
    background-color: #ADB96E;
}
.sidebar1 {
    float: right;
    width: 180px;
    background-color: #EADCAE;
    padding-bottom: 10px;
    }
.content {
    padding: 10px 0;
    width: 780px;
    float: right;
}
.content ul, .content ol {
    padding: 0 15px 15px 40px; 
}
nav ul{
    list-style: none; 
    border-top: 1px solid #666; 
    margin-bottom: 15px; 
}
nav li {
    border-bottom: 1px solid #666; 
    }
nav a, nav a:visited { 
    padding: 5px 5px 5px 15px;
    display: block; 
    width: 160px;  
    text-decoration: none;
    background-color: #C6D580;
}
nav a:hover, nav a:active, nav a:focus { 
    background-color: #ADB96E;
    color: #FFF;
}
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
        display: block;
}
/* ~~ The footer ~~ */
footer {
    padding: 10px 0;
    background-color: #CCC49F;
    position: relative;
    clear: both;
}
header, section, footer, aside, article, figure {
    display: block;
}

#1楼 票数:0

尝试完全定位ul.submenu元素。 然后,您可以显式设置宽度并将其放置在距离ul#navbar li父元素的左侧边缘不远处,像素为left: -180px (或您为宽度设置的任何值)。

演示

ul#navbar li {
    position: relative;
}
ul.submenu {
    position: absolute;
    width: 180px;
    left: -180px;
    top: 0;
}



另外,您的nav ul {...}行的原始CSS中缺少花括号{

#2楼 票数:0 已采纳

我继续,以您的样式为基础,为导航栏重建了CSS,以进行清理。

 @charset "utf-8"; body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } ul, ol, dl { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; } a img { border: none; } a:link { color: #42413C; text-decoration: underline; } a:visited { color: #6E6C64; text-decoration: underline; } a:hover, a:active, a:focus { text-decoration: none; } .container { width: 960px; background-color: #FFFFFF; margin: 0 auto; } header { background-color: #ADB96E; } .sidebar1 { float: right; width: 180px; background-color: #EADCAE; padding-bottom: 10px; } .content { padding: 10px 0; width: 780px; float: right; } /* ~~ The navbar ~~ */ nav #navbar { list-style: none; border-top: 1px solid #666; margin-bottom: 15px; } nav #navbar:after { content: ''; clear: both; display: block; } nav #navbar li { float: left; border-bottom: 1px solid #666; background-color: #C6D580; position: relative; } nav #navbar li a { padding: 5px 5px 5px 15px; width: 160px; display: block; text-decoration: none; } nav #navbar li:hover { background-color: #ADB96E; } nav #navbar li:hover > a, nav #navbar li .submenu li:hover > a { color: #FFF; } nav #navbar li .submenu { list-style: none; display: none; position: absolute; right: 100%; top: 0; } nav #navbar li .submenu li { float: none; } nav #navbar li:hover > .submenu { display: block; } /* ~~ The footer ~~ */ footer { padding: 10px 0; background-color: #CCC49F; position: relative; clear: both; } header, section, footer, aside, article, figure { display: block; } 
 <div class="sidebar1"> <nav> <ul id="navbar"> <li><a href="index.html">Home</a></li> <li><a href="solarshades.html">Solar Shades</a><ul class="submenu"> <li><a href="SolarShadeFabrics.html">Solar Shades Fabrics</a></li> </ul></li> <li><a href="privacyshades.html">Privacy Shades</a><ul class="submenu"> <li><a href="PrivacyShadeFabrics.html">Privacy Shades Fabrics</a></li> </ul></li> <li><a href="blackoutshades.html">Blackout Shades</a><ul class="submenu"> <li><a href="BlackoutShadeFabrics.html">Blackout Shades Fabrics</a></li> </ul></li> <li><a href="patioshades.html">Patio Shades</a><ul class="submenu"> <li><a href="PatioShadeFabrics.html">Exterior Shades Fabrics</a></li> </ul></li> <li><a href="customdrapesandcurtain.html">Custom Drapes and Curtains</a><ul class="submenu"> <li><a href="DraperyFabrics.html">Drapery Fabrics</a></li> <li><a href="MeasureingDrapery.html">Measuring Drapery</a></li> <li><a href="Curved Drapery Template.html">Curved Drapery Template</a></li> </ul></li> <li><a href="draperysystems.html">Drapery Systems</a></li> <li><a href="hometheatercurtains.html">Home Theater Curtains</a><ul class="submenu"> <li><a href="HomeTheaterFabrics.html">Home Theater Fabrics</a></li> </ul></li> <li><a href="somfyproducts.html">Somfy products</a><ul class="submenu"> <li><a href="SomfyMotor.html">Somfy Motor</a></li> <li><a href="SomfyControl.html">Somfy Control</a></li> <li><a href="SomfySwitch.html">Somfy Switch</a></li> <li><a href="SomfyAccessories.html">Somfy Accessories</a></li> </ul></li> <li><a href="photogalleries.html">Photo Gallary</a><ul class="submenu"> <li><a href="DraperyShowroom.html">Drapery Showroom</a></li> <li><a href="PortfolioGallery.html">Portfolio Gallerys</a></li> </ul></li> <li><a href="howtomeasureforshades.html">How to Measure for Shades</a></li> <li><a href="requestforshadequote.html">Request for Shade Quote</a></li> <li><a href="technicallinks.html">Technical Links</a></li> <li><a href="aboutus.html">About Us</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> </nav> <aside> <p>Some informational text can go HERE</p> </aside> </div> 

它的功能齐全, .submenu position基于将鼠标悬停在nav #navbar lirelative位置上。

我希望这有帮助。 ^^

  ask by William Kovar translate from so

未解决问题?本站智能推荐:

1回复

CSS-如何向左侧创建子菜单

大家好,我的目标是使子菜单向左扩展,而不是向右扩展。 CSS如下, 该页面的屏幕截图如下 当我将鼠标悬停在“用户管理”菜单上时,“创建用户”必须扩展到左侧。 任何帮助将深表感谢。 谢谢
1回复

带有纯CSS的垂直弹出菜单

请检查以下代码。 这里的问题是“ z-index”。 因此,当我将鼠标悬停在“ li”上时,子菜单会打开,但是当我将鼠标悬停在下一个“ li”上时,它会隐藏 但是删除“容器”和“ ul ul”的“ z-index”或保持相同的“ z-index”效果很好。 但是子菜单会在主菜单
4回复

带有垂直子菜单的水平菜单(仅HTML / CSS)

我在尝试使子菜单垂直而不是水平时遇到困难。 任何帮助将非常感激。 HTML: CSS: #menu { background-color: #206676; float: left; width: 100%; height: 60px; } ul#menu {
1回复

带有Css / html的垂直子菜单下拉菜单

我在html中有一个垂直的Nav菜单,我正在尝试制作一个submeu,但是效果不佳。 当我单击该子菜单时,它消失了。 任何帮助,将不胜感激 nav ul { list-style: none; margin: 0; padding: 0px; width: 200px; he
3回复

CSS-如何制作带有子菜单的简单导航菜单?

我目前正在学习HTML和CSS。 我完成了导航菜单,但是在主要选择下有子菜单。 这是我的代码: 这是我的HTML(我正在“半条命”和“门户网站”上进行学习): 我需要更改什么? 注意:是的,我尚未完成快速添加“ a”标签的操作...
1回复

HTML / CSS-如果显示子菜单,菜单将无法单击

以下菜单工作正常。 但是,一旦我添加了子菜单,那么菜单项将不再可单击(只能是子菜单项)。 关于即使显示子菜单也如何使菜单可单击的任何建议? 注意:仅在用户登录后才显示子菜单。
4回复

CSS - 子菜单不可见

http://jsfiddle.net/4hLnZ/ 有人可以弄清楚为什么我的子菜单没有显示在内容div之上
1回复

HTML / CSS水平子菜单附加到垂直子菜单

我想将一个垂直于子菜单的垂直子菜单对齐,如下所示: 如图所示,我能够实现这一目标,但我必须确保职位绝对。 问题是我希望每个子子菜单的顶部都与它附属的子菜单的顶部对齐。 例如,艺术家子子菜单与所示的子菜单完全相同,但A到Z与艺术家排成一行。 为了按照现在的方式进行操作,我必须创建