Question

网站上的水平空间比垂直空间更有限。考虑到这一点，我将导航栏上的顶级链接保留为单个单词或非常短的短语。第二级更灵活。（当然，没有第三级可以避免可访问性问题。）

我希望顶级中的每个

都是自动的，即适合顶级文本的大小，而不是在鼠标滚过它时展开以适合下拉列表。现在，它正在做跳跃动作！如果我将li的宽度发送到auto，并将li li的宽度发送到200px。顶部扩展以适应翻滚。

我已在其他情况下通过将所有顶级

设置为精确宽度来解决此问题，但我不想在此处这样做。

我会很感激任何建议！

这是迄今为止的代码......

/* ********* SIDEBAR FOR MAIN MENU ********* */

.well 
{
    float: right;
    width: 500px;
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: transparent; /* #f5f5f5; */
} /* 10/8/14 Nora moved from below 
        - Nora changed color
  */

.well h3
{
    display: none;
} /* 10/8/14 Nora added to hide menu title */

.well li
{
    float: right;
    width: auto;
} /* 10/8/14 Nora added to line navigation horizontally */

.well li
{
    width: 150px;
    padding-top: 5px;
    color: #005580;
    border-top: 3px solid transparent;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
} /* 10/9/14 Nora added to format links 
     10/13/14 Nora added border to keep spacing same with items with and without border
  */

.well li a
{
    color: #2B2D30;
    padding: 5px 18px;
    font-size: 18px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    border-top: 3px solid transparent;
} /* 10/8/14 Nora added from 2.5 site */

.well ul.nav li a:hover
{
    background: transparent;
    border-top: 3px solid #8CBD2E;
} /* 10/9/14 Nora added to remove background and add in green line */

.well li.current a
{
    color: #900;
    border-top: 3px solid transparent;
} /* 10/9/14 Nora added from 2.5 theme */

/* ***** SECOND LEVEL OF NAVIGATION ***** */

.well li.parent:hover ul
{
    width: 285px;
    box-shadow: 3px 2px 2px 2px rgba(150,150,150,0.3);
     -moz-box-shadow: 3px 2px 2px 2px rgba(150,150,150,0.3);
     -webkit-box-shadow: 3px 2px 2px 2px rgba(150,150,150,0.3);
} /* 10/9/14 Nora added to format rollover menu 
     10/20/14 Nora added float none for a vertical rollover menu - the first layer makes them go horizontal
     10/24/14 Nora moved the shadow off the li and onto the ul
  */

.well li ul li
{
    display: none;
    width: 275px;
} /* 10/10/14 Nora added to hide rollover menu 
     10/29/14 Nora adjusted size from 290
  */

.well li.parent:hover ul li
{
    position: relative;
    z-index: 100;
    display: block;
    width: 275px;
    padding: 5px 5px 15px 5px;
    float: none;
    background: #fff url(../../../images/LogosIcons/NavigationShadow.jpg) no-repeat left bottom;
} /* 10/9/14 Nora added to format rollover menu 
     10/20/14 Nora added float none for a vertical rollover menu - the first layer makes them go horizontal
     10/27/14 Nora added z-index because menu was going behind thumbnails
     10/29/14 Nora adjusted size from 290
  */

.well ul li:hover li a
{
    padding-left: 10px;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    text-transform: capitalize;
    text-shadow: none;
} /* 10/9/14 Nora added to keep green border from showing in dropdown menus 
     10/27/14 Nora added font information
  */

.well ul li:hover li a:hover
{
    border-top: 3px solid transparent;
} /* 10/29/14 Nora added to remove green border from 2nd level
  */

CSS下拉菜单 - 想要限制顶级与二级分开

0 个答案: