当文字长度大于

时，需要子菜单项打包嗨：我工作的网站建立在下划线WP主题的基本结构上。我有一个长文本行子菜单项。如果行超过li的宽度，我希望文本自动换行。（我想要的效果可以在youthconnectionwilmette.org的“程序”下看到）当文字长度大于

下面是我现在在puckpros.edkatzman.com下的“课程安排课程”。第一个子菜单项应该读“新客户：评估和课程 - 50折”，但它在获得截断“新客户：评估和”

我的WP生成的html是：

<nav class="site-navigation main-navigation" role="navigation"> 
    <h1 class="assistive-text">Menu</h1> 
    <div class="assistive-text skip-link"> 
    <ul id="menu-puckpros" class="menu"> 
    <li id="menu-item-798" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-798"> 
    <li id="menu-item-866" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-866"> 
     <a href="https://server21.securedata-trans.com/ap/discoverymarketingt/index.php?page=10">Schedule Lessons</a> 
     <ul class="sub-menu"> 
     <li id="menu-item-924" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924"> 
      <a href="https://server21.securedata-trans.com/ap/discoverymarketingt/index.php?page=10">New Customer: Evaluation & Lesson – 50% OFF</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</nav>

而且我使用的CSS是：

.main-navigation { 
list-style-type: none; 
margin: 0; 
padding: 0; 
height: 30px; 
background-color: #00497e; 
clear:both; 
width: 100%; 
} 

.main-navigation li { 
float: left; 
height: 30px; 
line-height: 30px; 
display: block; 
position:relative; 
} 


.main-navigation li a { 
display:block; 
color:#fde218; 
text-decoration:none; 
height: 30px; 
line-height: 30px; 
padding: 0 70px; 
} 
.main-navigation a:hover { 
color: #004973; 
background-color: #fde218; 
} 

.main-navigation ul ul li { 
float: left; 
width: 150px; 
background-color:maroon; 
top: 5px; 
position:relative; 
display:block; 
} 

.main-navigation ul ul li a { 
background-color:#00497e; 
color: #ffffff; 
width: 200px; 
display:block; 
}

我已经尝试了不同的显示值：，但没有发现任何有什么差别，除了显示：表细胞;其中包含第二个子菜单选项，但将第一个子菜单拆分并将其一部分放在第三个菜单项下。

我必须错过简单的东西，但经过几个小时的谷歌搜索和尝试任何建议，我发现，没有任何作品。（我看了一下，在萤火虫工作网站的CSS，但我看不出换行正在取得在哪里发生。）

来源

2013-02-25 tangobango

的关键是使基于列表的菜单：

1 - 不要选择列表（除显示，位置和浮动以及清除边距和填充以外）

2 - 使用display:block并将A-tag上的ALL STYLING（包括您的悬停和活动状态）置于其上。

你正在为所有事情都做好准备。如果你想要两条线，你需要高度自动增长。

来源

2013-02-25 19:43:07

谢谢。从nav li和nav li删除高度解决了这个问题。现在：您可能刚刚解决了我最大的整体CSS问题：样式菜单列表以及应用于ul，li，a的内容。只是为了澄清：1.确定包含nav/div的样式。 2.除了显示，位置和浮动以及清除边距和填充以外，不要显示ul – tangobango 2013-02-25 20:02:14

我被切断了：谢谢。从nav li和nav li删除高度解决了这个问题。现在：您可能刚刚解决了我最大的整体CSS问题：样式菜单列表以及应用于ul，li，a的内容。只是为了澄清：1.确定包含nav/div的样式。除了显示，位置和float和清除边距和填充 3.同为李 4. 2.不要风格UL把所有其他的风格的。对不对？非常感谢。 Ed – tangobango 2013-02-25 20:09:35

正确。看我的教程：http：//preview.moveable.com/jm/ilovelists/ – 2013-02-25 20:56:48

当文字长度大于

回答

相关问题