以下为题因3.1的示例代码和实现过程，供参考： HTML代码： ``` <div class="container"> <ul class="menu"> <li><a href="#">菜单1</a><span>相关介绍</span></li> <li><a href="#">菜单2</a><span>相关介绍</span></li> <li><a href="#">菜单3</a><span>相关介绍</span></li> </ul> </div> ``` CSS代码： ``` .container { font-family: Arial, sans-serif; } .menu li { display: inline-block; margin-right: 20px; position: relative; } .menu li a { text-decoration: none; color: black; } .menu li a:hover { color: red; cursor: pointer; } .menu li span { display: block; margin-top: 5px; color: #666; } ``` JavaScript代码： ``` $(document).ready(function() { // 调整文宇和标题的间距 $('.menu li').children('span').css('margin-top', '10px'); // 添加类名并修改样式 $('.menu li:first-child').addClass('active').children('a').css('color', 'red'); $('.menu li:not(:first-child)').children('span').css('color', '#666'); // 修改鼠标移入标题的样式 $('.menu li a').hover(function() { $(this).css('color', 'red'); }, function() { if (!$(this).parent().hasClass('active')) { $(this).css('color', 'black'); } }); }); ``` 说明： 1. 第一步通过jQuery的`.children()`方法找到每个菜单项下方的文宇，然后利用`.css()`方法修改样式。 2. 第二步使用了CSS和jQuery的`.addClass()`方法，将第一个菜单项添加了一个`active`的类名，并修改了标题的颜色。同时使用`.not()`方法选择非第一个菜单项，并修改下方文宇的颜色为灰色。 3. 第三步使用了jQuery的`.hover()`方法监听鼠标移入和离开标题的事件。利用`.css()`方法修改标题的颜色。如果是当前选中的菜单项，则不修改颜色，避免与第二步的样式重复。

这段代码主要实现了一个简单的菜单效果，包括菜单项的排列、样式调整以及鼠标移入移出时的样式变化等。具体的实现过程已经在您提供的代码注释中进行了详细解释。

如果您有需要，可以在此基础上进行进一步的定制和调整，比如修改菜单项的数量和内容、调整菜单项的排列方式等等。同时，也可以根据实际需求添加一些交互效果或者动画效果，让菜单看起来更加生动和有趣。