【发布时间】：2017-06-26 09:21:32
【问题描述】：
我正在尝试制作一个执行以下操作的六边形菜单：
- 悬停时高亮显示
- 可点击
- 有一个下拉菜单
我可以让颜色突出显示并显示单词，但我不能让它们可点击。我只是想尽快让这个工作。 sample
我也玩过 jfiddle enter link description here
HTML 文件：
<div class="menu" data-depth="0.80">
<ul>
<li class="svg_hexagon" id="ut_main">
<a herf="../index.html">
<svg version="1.1" viewBox="0 0 600 516.8">
<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
</svg>
<span> UT Main </span>
</a>
</li>
<li class="svg_hexagon" id="home">
<a herf="../assign2/index.html">
<svg version="1.1" viewBox="0 0 600 516.8">
<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
</svg>
<span> Home </span>
</a>
</li>
<li class="svg_hexagon dropdown" id="about">
<a herf="#">
<svg version="1.1" viewBox="0 0 600 516.8">
<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
</svg>
<span> About </span>
</a>
<ul class="sub-menu">
<li>
<a herf="#">The Artist</a>
</li>
<li>
<a herf="#">The Work</a>
</li>
</ul>
</li>
<li class="svg_hexagon" id="info">
<a herf="#">
<!-- draw hexagon -->
<svg version="1.1" viewBox="0 0 600 516.8">
<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
</svg>
<!-- hexagon drawn -->
<span> Info </span>
</a>
</li>
<li class="svg_hexagon dropdown" id="contact">
<a herf="#">
<!-- draw hexagon -->
<svg version="1.1" viewBox="0 0 600 516.8">
<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
</svg>
<!-- hexagon drawn -->
<span> Contact </span>
</a>
<ul class="sub-menu">
<li>
<a herf="#">E-Mail</a>
</li>
<li>
<a herf="https://www.facebook.com/glen.newell">Facebook</a>
</li>
</ul>
</li>
<li class="svg_hexagon" id="blank1">
<a herf="#">
<svg version="1.1" viewBox="0 0 600 516.8">
<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
</svg>
<span> </span>
</a>
</li>
<li class="svg_hexagon" id="blank2">
<a herf="#">
<svg version="1.1" viewBox="0 0 600 516.8">
<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
</svg>
<span> </span>
</a>
</li>
</ul>
</div>
CSS：
@charset "utf-8";
.menu {
position: absolute;
margin: 1em 1em;
}
.menu ul {
list-style: none; /*removes bullets*/
margin: 0;
padding: 0;
}
.menu ul li{
position: absolute; /*allows change position of my menu items*/
list-style-type: none;
}
.menu ul li a { /*ul #LISTNAME a could be used for sepcific list*/
/*float: left; moves sub menued items to left*/
text-decoration: none; /*removes all atributes*/
display: block;
/*color: white; makes all text white*/
font-family: "sans-serif"; /*sets font*/
text-transform: uppercase; /*makes it all uppercase*/
font-size: 0.8em; /*shrinks font and svgs*/
letter-spacing: 0.1em; /*spaces letters*/
position: relative;
}
.menu ul li a svg{
/*handled on page layout*/
}
.menu ul li a span{
position: absolute; /*puts it all close together in 3 colums*/
display: inline-block; /*clickable chunk vs clickable word*/
top: 0.5em; /*moves all words back up*/
left: 0.25em;
padding: 2em 0;
width: 6em;
height: 1.5em;
text-align: center; /*centers worts at top of hexagon*/
}
.menu ul.sub-menu{
display: none;
max-height: 0; /*removes highth from submenue for main menu*/
overflow: hidden;
border: 2px solid white; /*line between sub menu items*/
float: left; /*puts line and words to left*/
width: 175px; /*sets size of blocks*/
margin-top: -47px; /*moves menu up*/
opacity: 0;
}
.menu ul.sub-menu:hover{
display: block;
overflow: visible;
}
.menu ul.sub-menu li {
position: relative;
padding: 7px 10px; /*spaces out links in submenue*/
white-space: nowrap;
}
.menu ul li.svg_hexagon.dropdown > a:after{
content: '';/*holds content*/
display: block;
height: 2px;
width: 0;
background: pink;
position: absolute;
top: 50%;
margin-top: -3px;
left: 100%;
}
.menu ul.sub-menu li:not(:last-child){
border-bottom: 2px solid white;
}
.menu ul.sub-menu li a{
float: none;
}
.menu ul li.dropdown:nth-child(odd).active a:after{
width: 17em;
}
.menu ul li.dropdown:nth-child(odd) .sub-menu {
margin-top: 2.5em; /*puts sub menu below main menu*/
margin-left: 0.5em; /*centers submenu below main menu item*/
}
.menu ul li.dropdown:nth-child(even).active a:after{
width: 207px;
}
.menu ul li.dropdown:nth-child(even) .sub-menu{
margin-left: 107px;
}
.menu ul li.active .sub-menu{
display: inline-block;
}
/*my main ut page*/
ul li#ut_main{
top: 5.6em;
left: 5.7em;
}
ul li#home{
top: 11.7em;
left: 11.5em;
}
ul li#about{
top: 9.3em;
left: 15.7em;
}
ul li#info{
left: 19.85em;
top: 11.7em;
}
ul li#contact{
top: 9.3em;
left: 24.0em;
}
ul li#blank1{
top: 11.5em;
left: 0.5em;
}
ul li#blank2{
left: 11.5em;
top: 1.1em;
}
【问题讨论】：