如何仅使用HTML和CSS创建SVG菜单？

我正在尝试制作一个六边形菜单，其功能如下：

• 悬停在上方时高亮显示
• 是可点击的
• 有一个下拉菜单

我可以让颜色突出显示，文字显示，但我不能让他们点击。我只是想尽快让它工作起来

我也在演奏小提琴

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>

---

看起来您在

拥有一双新鲜的眼睛总是有帮助的。。。我是如何忽略了一些简单的lol。。。谢谢你，伙计

    @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;
}