diff --git a/index.html b/index.html
index 7fd91a6..9fafc12 100644
--- a/index.html
+++ b/index.html
@@ -88,6 +88,26 @@
         </div>
         <div class="menu-item__underline">
           <i></i>
+          <span class="select"></span>
+          <div class="options">
+            <ul>
+              <li data-decoration-style='solid'>
+                <i></i>
+              </li>
+              <li data-decoration-style='double'>
+                <i></i>
+              </li>
+              <li data-decoration-style='dashed'>
+                <i></i>
+              </li>
+              <li data-decoration-style='dotted'>
+                <i></i>
+              </li>
+              <li data-decoration-style='wavy'>
+                <i></i>
+              </li>
+            </ul>
+          </div>
         </div>
         <div class="menu-item__strikeout" title="删除线(Ctrl+Shift+X)">
           <i></i>
diff --git a/src/assets/images/line-double.svg b/src/assets/images/line-double.svg
new file mode 100644
index 0000000..2efe69f
--- /dev/null
+++ b/src/assets/images/line-double.svg
@@ -0,0 +1 @@
+<svg width="126" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M4 10h118v1H4zm0 3h118v1H4z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/line-wavy.svg b/src/assets/images/line-wavy.svg
new file mode 100644
index 0000000..bc0f47c
--- /dev/null
+++ b/src/assets/images/line-wavy.svg
@@ -0,0 +1 @@
+<svg width="126" height="20" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#000000" d="M4 10 Q6 8,8 10 T12 10 T16 10 T20 10 T24 10 T28 10 T32 10 T36 10 T40 10 T44 10 T48 10 T52 10 T56 10 T60 10 T64 10 T68 10 T72 10 T76 10 T80 10 T84 10 T88 10 T92 10 T96 10 T100 10 T104 10 T108 10 T112 10 T116 10 T120 10 T124 10"/></svg>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 0602747..5e91d99 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,6 +17,7 @@ import Editor, {
   PageMode,
   PaperDirection,
   RowFlex,
+  TextDecorationStyle,
   TitleLevel,
   splitText
 } from './editor'
@@ -177,9 +178,26 @@ window.onload = function () {
     '.menu-item__underline'
   )!
   underlineDom.title = `下划线(${isApple ? '⌘' : 'Ctrl'}+U)`
-  underlineDom.onclick = function () {
+  const underlineOptionDom =
+    underlineDom.querySelector<HTMLDivElement>('.options')!
+  underlineDom.querySelector<HTMLSpanElement>('.select')!.onclick =
+    function () {
+      underlineOptionDom.classList.toggle('visible')
+    }
+  underlineDom.querySelector<HTMLElement>('i')!.onclick = function () {
     console.log('underline')
     instance.command.executeUnderline()
+    underlineOptionDom.classList.remove('visible')
+  }
+  underlineDom.querySelector<HTMLUListElement>('ul')!.onmousedown = function (
+    evt
+  ) {
+    const li = evt.target as HTMLLIElement
+    const decorationStyle = <TextDecorationStyle>li.dataset.decorationStyle
+    instance.command.executeUnderline({
+      style: decorationStyle
+    })
+    underlineOptionDom.classList.remove('visible')
   }
 
   const strikeoutDom = document.querySelector<HTMLDivElement>(
diff --git a/src/style.css b/src/style.css
index 4259cc7..dc2c690 100644
--- a/src/style.css
+++ b/src/style.css
@@ -214,10 +214,53 @@ ul {
   background-image: url('./assets/images/italic.svg');
 }
 
-.menu-item__underline i {
+.menu-item .menu-item__underline {
+  width: 30px;
+  position: relative;
+}
+
+.menu-item__underline>i {
+  flex-shrink: 0;
   background-image: url('./assets/images/underline.svg');
 }
 
+.menu-item__underline .select {
+  width: 100%;
+  height: 100%;
+}
+
+.menu-item .menu-item__underline .options {
+  width: 128px;
+}
+
+.menu-item .menu-item__underline li {
+  padding: 1px 5px;
+}
+
+.menu-item__underline li i {
+  pointer-events: none;
+}
+
+.menu-item__underline li[data-decoration-style="solid"] {
+  background-image: url('./assets/images/line-single.svg');
+}
+
+.menu-item__underline li[data-decoration-style="double"] {
+  background-image: url('./assets/images/line-double.svg')
+}
+
+.menu-item__underline li[data-decoration-style="dashed"] {
+  background-image: url('./assets/images/line-dash-small-gap.svg');
+}
+
+.menu-item__underline li[data-decoration-style="dotted"] {
+  background-image: url('./assets/images/line-dot.svg');
+}
+
+.menu-item__underline li[data-decoration-style="wavy"] {
+  background-image: url('./assets/images/line-wavy.svg');
+}
+
 .menu-item__strikeout i {
   background-image: url('./assets/images/strikeout.svg');
 }